<template>
  <section class="PersonCard__container">
    <div class="__body">
      <div class="title">
        {{ item.name }}
      </div>
      <div class="content">
        <div class="left">
          <h1>
            <span class="name">{{ item.count }}</span>
          </h1>
          <h2>
            <div class="green" v-if="item.status > 0">
              <span>+{{ item.direction }}% &nbsp;</span
              ><i class="iconfont icon-Rise"></i>
            </div>
            <div class="red" v-else>
              <span>-{{ item.direction }}% &nbsp;</span
              ><i class="iconfont icon-fall"></i>
            </div>
          </h2>
        </div>
        <div class="right"></div>
      </div>
    </div>
    <!-- <div v-if="!noAction" class="__footer">
      <slot :item="item"></slot>
    </div> -->
  </section>
</template>
  
  <script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  methods: {},
};
</script>
  
  <style lang="scss" scoped>
.PersonCard__container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 350px;
  box-sizing: border-box;
  box-shadow: 0 0 12px #ebebeb;
  border-radius: 5px;
  overflow: hidden;
  transition: 0.5s;

  .__body {
    display: flex;
    flex-direction: column;

    padding: 10px;
    line-height: 1.6;
    .title {
      margin-top: 5px;
      margin-bottom: 2px;
      font-size: 1.3rem;
      color: rgb(208, 211, 227);
    }

    .content {
      display: flex;
      .left {
        h1 {
          font-size: 2.2rem;
          font-weight: bold;
          display: flex;
          height: 35px;
          .name {
            margin-right: 10px;
            // &:hover {
            //   color: #409eff;
            //   cursor: pointer;
            // }
          }

          .el-tag {
            margin-left: auto;
            border: none;
          }
        }
        h2 {
          font-size: 1.3rem;
          .green {
            color: rgb(114, 215, 188);
            display: flex;
          }
          .red {
            color: rgb(251, 144, 180);
          }
        }
      }
      .right {
      }
    }

    p {
      color: #666;
      line-height: 1.7;

      span {
        font-size: 1.2rem;
        // border: 1px solid #409eff;
        border-radius: 5px;
        margin: 0 5px 0 0;
        padding: 0 5px;
        // color: #409eff;
        background: #ebebeb;
      }
    }
  }

  //   .__footer {
  //     // display: none;
  //     // display: block;
  //     height: 30px;
  //     // transition: 1s;
  //     background: #fcfcfc;
  //   }

  //   &:hover {
  //     // > .__footer {
  //     //   // display: flex;
  //     //   height: 30px;
  //     //   background: #f4f4f4;
  //     // }
  //   }

  //   .stamp {
  //     position: absolute;
  //     right: 5%;
  //     top: -5%;
  //   }
}
</style>
  